<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="text">
<input type="button" value="加" onclick="fn(1)">
<input type="button" value="减" onclick="fn(2)">
<input type="button" value="乘" onclick="fn(3)">
<input type="button" value="除" onclick="fn(4)">
<h1>结果:<span></span></h1>
<!--引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    function fn(flag) {
        let x = $("input:eq(0)").val();
        let y = $("input:eq(1)").val();
        if(isNaN(x)||isNaN(y)){
            $("span").text("输入错误!")
            return;
        }
        switch (flag) {
            case 1:
                $("span").text(x*1+y*1);
                break;
            case 2:
                $("span").text(x-y);
                break;
            case 3:
                $("span").text(x*y);
                break;
            case 4:
                $("span").text(x/y);
                break;

        }
    }
</script>
</body>
</html>